import { Meta } from '@storybook/addon-docs/blocks';
import { ColorSwatch } from '../../.storybook/custom/components/Swatches'

<Meta title="Foundations/Color Palettes/WQXR Palette" />

### WQXR Palette

Our cool and calming color palette for WQXR is meant to relax and invite users to our audio-focused, classical music experience.

WQXR COLOR SWATCHES (PRIMARY / UTILITY)

| Color Swatch Type | Color Swatch Examples |
| -- | -- |
| Primary | COLOR SWATCHES HERE |
| Utility | COLOR SWATCHES HERE |


**Denim Blue** is the primary color for CTAs, secondary headers, and may be used as a background color or for larger, prominent elements. **Water Blue** can be used as a background color or as a tertiary header color. **Azure** is purely a decorative lighter alternative. **White** is the primary color for headers, footer text, tooltip text, logos, and buttons. **Black** is used for main text on white card backgrounds and as the tooltip background color. **Grey Dark** may be used for main headers on editorial pages. **White 50 opacity** may be used for smaller headers on blue backgrounds. **Black 50 opacity** may be used for time information on playlists.


### Color Groups
Color groups help predetermine foreground colors based on background color. WQXR also has two color groups, light and dark. WQXR currently has the dark color group in production. The light color group is designed for editorial content but it is not in production.

#### Light
<img alt="wqxr light theme" src="./images/Foundations-Color-WQXR-LightTheme.png" width="246" />

#### Dark
<img alt="wqxr dark theme" src="./images/Foundations-Color-WQXR-DarkTheme.png" width="246" />


### Border Usage

Currently, only one normal border style is actively used in WQXR (Jukebox) in buttons and boxes. It helps delineate groups of information on lists but is not central to the WQXR brand.